<template>
  <div class="good-item-wrapper">
    <a :href="goodItem.businer">
      <img :src="goodItem.img" alt="" @load="imgLoad"/>
      <span class="good-title">{{ goodItem.title }}</span>
      <div class="price-add"><span>￥{{ goodItem.price }}</span> <span class="add-good" @click.prevent="btnClick(goodItem.id)"></span></div>
    </a>
  </div>
</template>

<script>
export default {
  name: "goodItem",
  components: {},
  props: {
    goodItem: Object,
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    btnClick(id){
      alert(id);
    },
    imgLoad(){
      this.$emit("imgLoad")
    }
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.good-item-wrapper {
  flex-basis: 50%;
}
.good-item-wrapper a{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.good-item-wrapper img {
  width: 90%;
  border-radius:5%;
}
.good-title{
  font-size: 16px;
  width: 70%;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
}
.add-good{
  width: 35px;
  height: 30px;
  background-image:url('~@/assets/img/button/add_before.svg');
  background-repeat: no-repeat;
  background-size:contain;
}
.price-add{
  width: 60%;
  height:30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  margin-bottom: 10px;
}
</style>